<template>
  <div class="circle">
    <!--S顶部-->
    <roof title="圈子"></roof>
    <!--E顶部-->

    <!--S导航标签-->
    <div id="tag" :style="{top:systemInfo.statusBarHeight + capsule_height + 'px'}">
      <div class="tag">
        <div
          v-for="(item,index) in tab_tags"
          class="text"
          :class="tab_tags_index === index ? 'active' : ''"
          :key="index"
          @click="clickTag(index)">
          {{item.text}}
        </div>
        <div class="sign"><div :class="'div_'+tab_tags_index"></div></div>
      </div>
    </div>
    <!--E导航标签-->

    <!--S内容-->
    <div id="content" :style="{'padding-top':content_padding_top+'px'}">
      <!--Stag选项卡-->
      <swiper
        class="items"
        :current="tab_tags_index"
        :duration="200"
        @change="tagsChange"
      >
        <!--S列表-->
        <swiper-item
          v-for="(item,index) in tab_tags"
          :key="index"
          class="item-content">

          <!--S关注的用户圈子-->
          <scroll-view
            v-if="item.value === 'attention'"
            class="scroll"
            :scroll-top="scroll_top"
            :scroll-y="true"
            :scroll-with-animation="true"
            @scroll="contentScroll"
            >
            <empty>您的关注的圈子空空荡荡哦</empty>
          </scroll-view>
          <!--E关注的用户圈子-->


          <!--S推荐的用户圈子-->
          <scroll-view
            v-if="item.value === 'recommend'"
            class="scroll"
            :scroll-top="scroll_top"
            :scroll-y="true"
            :scroll-with-animation="true"
            @scroll="contentScroll"
            >
            <circle-list @click-control="clickControl" :sheet_index="sheet_index"></circle-list>
          </scroll-view>
          <!--E推荐的用户圈子-->


        </swiper-item>
        <!--E列表-->

      </swiper>
      <!--Etag选项卡-->
    </div>
    <!--E内容-->

    <!--S返回顶部-->
    <div
      id="go-top"
      v-show="show_go_top"
      @click="clickGoTop"
      >
      <i class="iconfont icon-huidingbu"></i>
    </div>
    <!--E返回顶部-->

    <!--S发布圈子按钮-->
    <div id="add">
      <i class="iconfont icon-icon-add-3"></i>
    </div>
    <!--E发布圈子按钮-->

    <!--S上拉菜单-->
    <action-sheet
      :show="sheet_show"
      :options="sheet_options"
      @select="selectActionSheet"
      @cancel="sheet_show = false"
    ></action-sheet>
    <!--E上拉菜单-->

    <!--S底部导航-->
    <i-tabbar value="circle"></i-tabbar>
    <!--E底部导航-->
  </div>
</template>

<script>
  import roof from '../../components/roof/Roof'
  import iTabbar from '../../components/itabbar/ITabbar'
  import store from '../../store'
  import empty from '../../components/empty/Empty.vue'
  import circleList from '../../components/circle-list/CircleList'
  import actionSheet from '../../components/action-sheet/ActionSheet'
  import {select} from '../../utils/index'
  export default {
    data () {
      return {
        // 胶囊区域高度
        capsule_height: 0,
        // 顶部填充区域高度
        content_padding_top: 0,
        // 是否显示回页面顶部区域
        show_go_top: false,
        // 滚动条位置
        scroll_top: null,
        // 标签tags
        tab_tags: [
          {value: 'attention', text: '关注'},
          {value: 'recommend', text: '推荐'}
        ],
        // 标签当前下标
        tab_tags_index: 1,
        // 上拉菜单选项
        sheet_options: [],
        // 上拉菜单显示状态
        sheet_show: false,
        // 选中的上拉菜单下标
        sheet_index: -1
      }
    },
    components: {
      roof,
      'i-tabbar': iTabbar,
      empty,
      'circle-list': circleList,
      'action-sheet': actionSheet
    },
    computed: {
      // 设备信息
      systemInfo () {
        return store.state.systemInfo
      },
      // 胶囊位置信息
      capsulePosition () {
        return store.state.capsule
      }
    },
    mounted () {
      this.setCapsuleHeight()
      this.setContentPaddingTop()
    },
    methods: {
      // Run
      /**
       * 设置胶囊的高度
       */
      setCapsuleHeight () {
        this.capsule_height = this.capsulePosition.height + ((this.capsulePosition.top - this.systemInfo.statusBarHeight) * 2)
      },
      /**
       * 设置内容区域的padding-top
       */
      setContentPaddingTop () {
        select('#tag')
          .then((res) => {
            this.content_padding_top = this.systemInfo.statusBarHeight + this.capsule_height + res[0].height
          })
      },

      // Handle
      /**
       * 页面滚动
       */
      contentScroll (ev) {
        if (ev.target.scrollTop >= 1500) {
          if (!this.show_go_top) this.show_go_top = true
        } else {
          if (this.show_go_top) this.show_go_top = false
        }
      },
      /**
       * 选项卡切换
       */
      tagsChange (ev) {
        this.tab_tags_index = ev.mp.detail.current
      },
      /**
       *点击标签按钮
       */
      clickTag (index) {
        this.tab_tags_index = index
      },
      /**
       * 点击圈子右上角显示上拉菜单
       */
      clickControl (options) {
        this.sheet_options = options
        this.sheet_show = true
      },
      /**
       * 点击选择了下拉菜单
       * @param index
       */
      selectActionSheet (index) {
        this.sheet_index = index
        setTimeout(() => {
          this.sheet_index = -1
        }, 100)
      },
      /**
       * 点击返回顶部
       */
      clickGoTop () {
        this.scroll_top = 0
        setTimeout(() => {
          this.scroll_top = null
        }, 100)
      }
    }
  }
</script>

<style scoped lang="less" src="./index.less"></style>
